<template>
	<view class="tab_equally_border_cn ">
		<view class="height-70 flex align-center radius-35 width-fit" :style="tabs_style">
			<view @click="click(index)" class="tab_item line-height-70 text-center border-box "
				:style="index == active ? tabs_item_on_style : tabs_item_style" v-for="(item, index) in list1"
				:key="index">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: { //数据显示
				type: Array,
				default: ()=>[]
			},
			listKey: { //当 list 是一个 对象数组 时，通过 list-key 来指定 Object 中 key 的值作为选择器显示内容
				type: String,
				default: ''
			},
			active: { //当前激活标签的索引
				type: [Number, String],
				default: 0
			},
			textSize: { //文字大小，默认单位rpx
				type: [Number, String],
				default: 28
			},
			color: { //底部条颜色
				type: String,
				default: '#4d4d4d'
			},

		},
		computed: {
			list1() {
				let array = []
				for (let i = 0; i < this.list.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.name = this.list[i][this.listKey]
					} else {
						obj.name = this.list[i]
					}
					array.push(obj)
				}
				return array
			},

			tabs_style() {
				return 'border: 2rpx solid' + this.color + ';'
			},

			tabs_item_style() {
				return 'width: 230rpx;font-size:' + this.textSize + 'rpx;color:' + this.color + ';'
			},

			tabs_item_on_style() {
				return 'width: 230rpx;background:' + this.color + ';font-size:' + this.textSize + 'rpx;color:#fff;'
			},
		},


		methods: {

			//点击标签
			click(index) {
				//更新选中状态
				this.$emit("update:active", index)
				// 回调（当前点击的索引）
				this.$emit('click', {
					index: index
				});
			}
		}
	}
</script>

<style scoped>
	.tab_item:nth-child(1) {
		border-radius: 35rpx 0 0 35rpx;
	}

	.tab_item:nth-child(2) {
		border-right: 2rpx solid #4d4d4d;
		border-left: 2rpx solid #4d4d4d;
	}

	.tab_item:nth-child(3) {
		border-radius: 0 35rpx 35rpx 0;
	}
	.width-fit{
		width:fit-content;
	}
</style>
